<template>
  <body>
    <!-- 组件引入 -->
    <cart-header></cart-header>
    <!-- 文秘指导内容部分 -->
    <div class="wmzd">
      <!-- 一、banner部分 -->
      <div class="banner">
        <img src="/img/wmzd-banner.png" height="436px" />
        <div class="content">
          <h1>文案指导服务</h1>
          <h4>团队经验丰富，保障原创度</h4>
          <a href="#">立即咨询</a>
        </div>
      </div>
      <!-- 二、热门服务精选部分 -->
      <div class="rmfw">
        <h2>热门服务精选</h2>
        <ul>
          <li>
            <div>
              <img src="img/cl.png" />
              <h5>各种材料</h5>
              <p>
                考察材料、交流材料、汇报材
                <br />
                料等
              </p>
              <a href="#">了解更多</a>
            </div>
          </li>

          <li>
            <div>
              <img src="img/gw.png" />
              <h5>公文应用</h5>
              <p>
                调研报告、考察报告、整改措
                <br />
                施、剖析材料等
              </p>
              <a href="#">了解更多</a>
            </div>
          </li>

          <li>
            <div>
              <img src="img/jg.png" />
              <h5>讲稿发言</h5>
              <p>
                竞职演说、会议发言、庆典致辞、
                <br />
                开业开幕等
              </p>
              <a href="#">了解更多</a>
            </div>
          </li>

          <li>
            <div>
              <img src="img/zj.png" />
              <h5>总结汇报</h5>
              <p>
                工作计划、工作意见、年终总
                <br />
                结、单位总结等
              </p>
              <a href="#">了解更多</a>
            </div>
          </li>
        </ul>
      </div>
      <!-- 三、服务特色部分 -->
      <div class="fwts">
        <h2>服务特色</h2>
        <ul>
          <li>
            <div>
              <img src="img/zf.png" />
              <h5>快速交付</h5>
              <p>
                时间紧急不用怕，加急服务能
                <br />
                满足你的紧急需求
              </p>
            </div>
          </li>

          <li>
            <div>
              <img src="img/wd.png" />
              <h5>在线问答</h5>
              <p>
                有着多年经验的团队
                <br />
                为您答疑解惑
              </p>
            </div>
          </li>

          <li>
            <div>
              <img src="img/xzzd.png" />
              <h5>全程协助指导</h5>
              <p>
                对于您的疑问，我们提供一对
                <br />
                一服务，量体裁衣的指导
              </p>
            </div>
          </li>

          <li>
            <div>
              <img src="img/xg.png" />
              <h5>修改到满意为止</h5>
              <p>
                免费修改，直到您满意之后
                <br />
                再完成交付
              </p>
            </div>
          </li>
        </ul>
      </div>
      <!-- 四、服务流程部分 -->
      <div class="fwlc">
        <h2>服务流程</h2>
        <p>简单快捷，省心省力</p>
        <ul>
          <li>
            <span>1</span>
            <h4>沟通需求</h4>
          </li>
          <li>
            <span>2</span>
            <h4>支付定金</h4>
          </li>
          <li>
            <span>3</span>
            <h4>确认内容</h4>
          </li>
          <li>
            <span>4</span>
            <h4>双编辑保证</h4>
          </li>
          <li>
            <span>5</span>
            <h4>完成服务</h4>
          </li>
        </ul>
        <a href="#">免费咨询</a>
      </div>
      <!-- 五、为什么选择我们部分 -->
      <div class="xzwm">
        <h2>为什么选择我们</h2>
        <p>我们努力保障客户获得满意的服务</p>
        <ul>
          <li>
            <h5>多轮编校</h5>
            <p>
              对口编辑撰写，且另一名责任
              <br />
              编辑进行严格的质量把控
            </p>
          </li>
          <li>
            <h5>支付&发票</h5>
            <p>
              支付宝、微信、银联均可
              <br />
              支付，走对公账户
            </p>
          </li>
          <li>
            <h5>实力团队</h5>
            <p>
              多年运营经验，客户团队
              <br />
              一对一服务
            </p>
          </li>
          <li>
            <h5>即时响应</h5>
            <p>
              实时沟通进展情况，及时反
              <br />
              馈，准时返稿，服务每一
              <br />
              位客户
            </p>
          </li>
        </ul>
      </div>
      <!-- 六、不受理内容部分 -->
      <div class="bsl">
        <h2>本站不受理以下内容</h2>
        <ul>
          <li>
            <img src="img/damie.png" />
            <span>学术论文</span>
          </li>
          <li>
            <img src="img/damie.png" />
            <span>实验研究数据</span>
          </li>
          <li>
            <img src="img/damie.png" />
            <span>科研项目申报</span>
          </li>
          <li>
            <img src="img/damie.png" />
            <span>科研验收材料</span>
          </li>
        </ul>
      </div>
      <!-- 七、注意事项部分  -->
      <div class="zysx">
        <div class="content">
          <img src="img/dzbck10-icon.png" />
          <div class="right">
            <div class="top">
              <h5>付完款以后还要做什么？提交时要注意什么？</h5>
              <p>
                成功付费后请务必打电话确认汇款信息，这样客服才能为你开通VIP权限。
              </p>
            </div>
            <ul>
              <div class="line"></div>
              <p>常见问题:</p>
              <li>一般多久完成服务？可以加急吗？</li>
              <li>网站有信用有保障吗？</li>
              <li>文章质量如何，我想知道你们的服务？</li>
              <li>能不能再偏宜点，多办几个会员可否给点优惠？</li>
              <li>我的评价有作用吗？</li>
              <li>不是特别满意怎么修改？</li>
              <li>付完款以后还要做什么？提交时要注意什么？</li>
            </ul>
          </div>
        </div>
      </div>
      <cart-footer></cart-footer>
    </div>
  </body>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector("body").setAttribute("style", "margin:0;padding:0");
    next();
  },
};
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
/******************* 一、banner部分 ************************/
.wmzd .banner {
  position: relative;
  text-align: center;
  z-index: 2;
}
.wmzd > .banner > img {
  width: 100vw;
  position: absolute;
  right: 0;
  z-index: -1;
}

.wmzd .banner .content {
  display: inline-block;
}

.wmzd .banner .content h1 {
  color: #333;
  font-size: 62px;
  padding: 104px 0 10px;
}

.wmzd .banner .content h4 {
  color: #333;
  font-size: 34px;
  padding: 0 60px;
  font-weight: 200;
}

.wmzd .banner .content a {
  width: 170px;
  height: 46px;
  color: #fff;
  font-size: 18px;
  background-color: #00a2ca;
  display: block;
  text-align: center;
  line-height: 46px;
  margin: auto;
}

/******************* 二、热门服务精选部分 ************************/
.wmzd .rmfw {
  padding: 50px 0;
}

.wmzd .rmfw h2 {
  font-size: 36px;
  color: #333;
  text-align: center;
}

.wmzd .rmfw ul {
  width: 1200px;
  height: 387px;
  display: flex;
  justify-content: space-between;
  margin: 50px auto 0;
}

.wmzd .rmfw ul li {
  width: 281px;
  height: 365px;
  box-shadow: 0 0 20px -5px;
}

.wmzd .rmfw ul li img {
  width: 80px;
  height: 70px;
  display: block;
  margin: 19px auto 15px;
}

.wmzd .rmfw ul li h5 {
  color: #333;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
}

.wmzd .rmfw ul li p {
  color: #777;
  font-size: 14px;
  text-align: center;
  margin: 23px 0 45px;
}

.wmzd .rmfw ul li a {
  color: #fff;
  width: 165px;
  height: 44px;
  font-size: 18px;
  background-color: #ff7c12;
  border-radius: 44px;
  display: block;
  text-align: center;
  line-height: 44px;
  margin: auto;
}

/******************* 三、服务特色部分 ************************/
.wmzd .fwts {
  height: 520px;
  background-color: #f9f9f9;
  padding: 50px 0 70px;
  box-sizing: border-box;
}

.wmzd .fwts h2 {
  font-size: 36px;
  color: #333;
  text-align: center;
  margin-bottom: 40px;
}

.wmzd .fwts ul {
  width: 1200px;
  height: 306px;
  display: flex;
  justify-content: space-between;
  margin: auto;
}

.wmzd .fwts ul li {
  width: 280px;
  box-shadow: 0 0 20px -5px;
  background-color: #fff;
}

.wmzd .fwts ul li img {
  width: 60px;
  height: 73px;
  display: block;
  margin: 40px auto 0;
}

.wmzd .fwts ul li h5 {
  color: #333;
  font-size: 20px;
  text-align: center;
  margin: 30px 0 24px;
}

.wmzd .fwts ul li p {
  color: #777;
  font-size: 14px;
  text-align: center;
}

/******************* 四、服务流程部分 ************************/
.wmzd .fwlc {
  width: 1583px;
  height: 492px;
  padding: 80px 72px;
  box-sizing: border-box;
  margin: auto;
}

.wmzd .fwlc h2 {
  font-size: 36px;
  color: #333;
  text-align: center;
}

.wmzd .fwlc > p {
  color: #777;
  font-size: 18px;
  margin-top: 9px;
  text-align: center;
}

.wmzd .fwlc ul {
  display: flex;
  justify-content: space-between;
  width: 1035px;
  height: 128px;
  box-sizing: border-box;
  margin: 40px auto 32px;
}

.wmzd .fwlc ul li span {
  display: block;
  width: 75px;
  height: 75px;
  background-color: #f9f9f9;
  color: #4fc0e7;
  border-radius: 50%;
  text-align: center;
  line-height: 75px;
  font-weight: 600;
  font-size: 20px;
  margin: 0 22.5px 26px;
}

.wmzd .fwlc ul li h4 {
  font-size: 18px;
  color: #333;
  margin-left: 20px;
}

.wmzd .fwlc a {
  display: block;
  width: 215px;
  height: 50px;
  color: #fff;
  background-color: #ff7c12;
  border-radius: 50px;
  margin: auto;
  text-align: center;
  line-height: 50px;
  font-size: 24px;
}

/******************* 五、为什么选择我们部分 ************************/
.wmzd .xzwm {
  height: 525px;
  background-color: #f9f9f9;
  padding: 50px 0 70px;
  box-sizing: border-box;
}

.wmzd .xzwm h2 {
  color: #333;
  font-size: 36px;
  text-align: center;
}

.wmzd .xzwm > p {
  color: #777;
  font-size: 18px;
  margin-top: 20px;
  text-align: center;
}

.wmzd .xzwm ul {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin: 64px auto 0;
}

.wmzd .xzwm ul li {
  width: 276.45px;
  height: 252px;
  background-color: #fff;
}

.wmzd .xzwm ul li h5 {
  color: #333;
  font-size: 20px;
  text-align: center;
  margin: 68px 0 42px;
}

.wmzd .xzwm ul li p {
  color: #777;
  font-size: 14px;
  text-align: center;
}

/******************* 六、不受理内容部分 ************************/
.wmzd .bsl {
  width: 1583px;
  height: 256px;
  margin: 60px auto 80px;
}

.wmzd .bsl h2 {
  color: #333;
  font-size: 36px;
  text-align: center;
  margin-bottom: 60px;
}

.wmzd .bsl ul {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin: auto;
}

.wmzd .bsl ul li {
  width: 276.45px;
  height: 142px;
  background-color: #f9f9f9;
  /* list-style: square inside url(./img/damie.png) */
  text-align: center;
  position: relative;
}

.wmzd .bsl ul li img {
  position: absolute;
  margin: 40px -20px;
}

.wmzd .bsl ul li span {
  margin-left: 50px;
  color: #333;
  font-size: 18px;
  line-height: 142px;
}

/******************* 七、注意事项部分 ************************/
.wmzd .zysx {
  height: 550px;
  background-color: #f9f9f9;
  margin: auto;
}
.wmzd .zysx .content {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin: auto;
  padding-top: 66px;
}
.wmzd .zysx .content img {
  width: 330px;
  height: 325px;
}
.wmzd .zysx .content .right {
  width: 828px;
  height: 332px;
}
.wmzd .zysx .right .top h5 {
  color: #333;
  font-size: 24px;
  margin-bottom: 8px;
}
.wmzd .zysx .right .top p {
  color: #999;
  font-size: 15px;
}
.wmzd .zysx .right ul .line {
  width: 828px;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  margin: 20px 0 20px;
}
.wmzd .zysx .right ul p {
  color: #333;
  font-size: 16px;
}
.wmzd .zysx .right ul li {
  color: #333;
  font-size: 14px;
  margin-top: 10px;
}
.wmzd .zysx .right ul li:last-child {
  color: #24afd4;
}
</style>